<template>
  <div class="tab-box">
    <div class="tab-head">
      <ul>
        <li v-for="(item,index) in navs" :key="index" :class="[currentIndex == index ? 'active' :'','title']"
            @click="switchTo (index,item)">
          {{ item.title }}
          <i class="title-line" :style="{width:currentIndex==index?'100px':'0'}"></i>
        </li>
      </ul>
    </div>
    <div class="content-box">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabNav",
  props: {
    navs: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      currentIndex: 0,
    }
  },
  methods:{
    switchTo(index,item){
      this.currentIndex=index
      this.$emit("clickNav",index)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-box {
  padding: 0 20px;

  .tab-head {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #333333;
    background-color: #fff;
    border-bottom: 1px solid #DDDDDD;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: left;

      .title {
        position: relative;
        left: 0;
        margin-right: 20px;
        width: 100px;
        height: 100%;
        text-align: center;
        cursor: pointer;

        .title-line {
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          height: 3px;
          transition: all .5s;
          background-color: #3F8AF9;
        }

        &:hover {
          color: #3F8AF9;
        }

        &:hover > .title-line {
          color: #3F8AF9;
          width: 100px;
        }
      }
    }
  }
}

.active {
  color: #3F8AF9;
}
.content-box{
  padding: 10px 0;
}
</style>
